<template>
	<pd-popup ref='popup'>
		<view class="__common_popup_wrapper _car_color_select">
			<view class="_color_list">
				<view class="_color_item" 
					v-for="item in colors" 
					:key='item.id'
					:class="{'_active_color_item' : item.id === result}"
					@tap="result = item.id">
					<view 
						class="_color_block" 
						:style="{background : item.id}"
						:class="{'_white_border' : item.id === '#fff'}"></view>
					<view class="_text_align_center _text_size_28">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="__common_popup_footer flex jcsb">
				<button type="default" @tap="cancel">取消</button>
				<button type="primary" @tap='confirm'>确认</button>
			</view>
		</view>
	</pd-popup>
</template>

<script lang="ts" setup>
import PdPopup from './pd-popup.vue';
import { CAR_COLORS } from '../config';
import type { TsHelp } from '../libs/ts-help';
import PD from '../libs';
import { useCompRef } from '../hooks/useRefs';

const popup = useCompRef(PdPopup);
const colors = CAR_COLORS;
const result = ref('');

let resolver : TsHelp.PromiseResolver<{value: string}>;
let rejecter : () => void;

const open = () : Promise<{value : string}> => {
	return new Promise((r,j) => {
		resolver = r;
		rejecter = j;
		popup.value?.open();
	});
};

const confirm = () => {
	if (!result.value.length) {
		PD.UniHelp.toast('请选择车辆颜色');
		return;
	};
	resolver && resolver({
		value : colors.find(v => v.id === result.value)!.label
	});
	popup.value?.close();
};

const cancel = () => {
	rejecter && rejecter();
	popup.value?.close();
};

defineExpose({
	open
});

</script>

<style lang="less" scoped>
._car_color_select {
	
	._color_list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx 32rpx;
		max-height: 80vh;
		overflow-y: auto;
		--radiu : 8rpx;
		._color_item {
			border: 1px solid #fff;
			padding: 8rpx 0;
			border-radius: var(--radiu);
		}
		._color_block {
			width: 80%;
			margin: 0 auto 20rpx;
			height: 80rpx;
			border-radius: var(--radiu);
		}
		._white_border {
			border: 1px solid #eee;
		}
	}
	._active_color_item {
		border: 1px solid var(--primary) !important;
	}
}
</style>